<!-- 景区信息：星级、评论、评价 -->
<!-- 景区信息：星级、评论、评价 -->
<!-- 景区信息：星级、评论、评价 -->
<template>
  <div class="info">
    <div class="info-top">
      <!-- 评分、超赞、评论、攻略区 -->
      <div class="info-top-left">
        <a href="javascript:;"></a>
        <!-- 评分、超赞区 -->
        <div style="display: block">
          <span class="info-score">{{informationList[0].content}}</span>
          <span class="info-text">分</span>
          <span class="info-desc">超赞</span>
        </div>
        <!-- 评论、攻略区 -->
        <div style="display: block">
          <span class="info-comment">{{informationList[0].comment}}条评论</span>
          <span class="info-strategy">{{informationList[0].strategy}}条攻略</span>
          <span class="info-icon">></span>
        </div>
      </div>
      <!-- 景点简介、开放时间 -->
      <div class="info-top-right">
        <a href="javascript:;"></a>
        <div style="display: block">
          <span class="info-title">景点简介</span>
        </div>
        <div style="display: block">
          <span class="info-texts">开放时间、贴士</span>
          <span class="info-icons">></span>
        </div>
      </div>
    </div>
    <!-- 定位区 -->
    <div class="info-bottom">
      <p>
        <span class="iconfont">&#xe63e;</span>
        &nbsp;&nbsp;{{this.$store.state.city+"市"}}
        <span class="info-endicon">></span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailsInformation',
  props: {
    informationList: Array
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="stylus" scoped>
  .info
    position relative
    top -.1rem
    padding .1rem .2rem 0 .2rem
    margin-bottom .1rem
    background #fff
    border-radius .1rem .1rem 0 0
    .info-top
      display flex
      width 100%
      padding-top .1rem
      padding-bottom .2rem
      border-bottom 1px solid #f5f5f5
      .info-top-left
        position relative
        flex 1
        border-right 1px solid #f5f5f5
        a
          position: absolute
          left 0
          top 0
          width 100%
          height 100%
        .info-score
          font-size .44rem
          color #ff8300
          line-height .44rem
        .info-text
          font-size .28rem
          color #ff8300
          line-height .48rem
        .info-desc
          font-size .28rem
          color #ff8300
          line-height .48rem
          margin-left .2rem
        .info-comment
          font-size .24rem
          color #9e9e9e
          line-height .32rem
          margin-right .2rem
        .info-strategy
          font-size .24rem
          color #9e9e9e
          line-height .32rem
          margin-right .2rem
        .info-icon
          position absolute
          top .3rem
          right .2rem
          color #9e9e9e
          font-size .24rem
          font-weight bold
      .info-top-right
        position relative
        flex 1
        a
          position absolute
          left 0
          top 0
          width 100%
          height 100%
        .info-title
          font-size .28rem
          color #212121
          line-height .48rem
          padding-left .3rem
        .info-texts
          color #9e9e9e
          font-size .24rem
          padding-left .3rem
        .info-icons
          position absolute
          top .3rem
          right .2rem
          color #9e9e9e
          font-size .24rem
          right 0
          font-weight bold
    .info-bottom
      display block
      position relative
      padding .2rem 0
      line-height .36rem
      color #212121
      p
        padding-right .56rem
        position relative
        padding-left .56rem
        .iconfont
          display block
          height 100%
          line-height 100%
          position absolute
          left 0
          top .1rem
          margin-top -.16rem
          margin-right .2rem
          color #9e9e9e
          font-size .36rem
        .info-endicon
          position: absolute;
          right: 0;
          top: 50%;
          margin-top: -.14rem;
          color: #9e9e9e;
          font-size: .24rem;
          font-weight bold
</style>
